<template>

<div>
<h2 style="color:cyan; margin-top: 15px;">屠宰信息 &nbsp; <el-button type="primary" @click="open">设置</el-button></h2>
<br/>
<hr>
<el-form inline="true" >
   <el-form :inline="true" style="margin-top: 15px;margin-left: 15px;" class="demo-form-inline">
      &nbsp;<el-form-item label="批次">
      :{{ slaughtess.productionBatch }}
    </el-form-item>
        &nbsp; &nbsp; &nbsp;<el-form-item label="到厂均重（公斤）">
      :{{  slaughtess.arrivalWeight}}
    </el-form-item>
    <br/>
       <el-form-item label="到厂时间">
      :{{  moment(slaughtess.arrivalTime).format("YYYY年-MM月-DD日:MM:SS")}}
    </el-form-item>

     <el-form-item label="屠宰时间">
      :{{ moment(slaughtess.feedTime).format("YYYY年-MM月-DD日:MM:SS")}}
    </el-form-item>
        
    <br/>
    
  </el-form>
</el-form>
 <el-dialog v-model="logic.isOpen" title="屠宰信息" width="500" align-center draggable>
    <el-form label-width="120">
      <el-form-item label="批次" >
        <el-input v-model="slaugth.productionBatch"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="到厂均重（公斤）" >
        <el-input v-model="slaugth.arrivalWeight" autocomplete="off" />
      </el-form-item>
         <el-form-item label="到厂时间">
      <el-col :span="11">
        <el-date-picker
         value-format="YYYY-MM-DD"
          type="date"
          v-model="slaugth.arrivalTime"
          placeholder="请选择"
          style="width: 100%"
        />
      </el-col>
        </el-form-item>
        <el-form-item label="屠宰时间">
      <el-col :span="11">
        <el-date-picker
         value-format="YYYY-MM-DD"
          type="date"
          v-model="slaugth.feedTime"
          placeholder="请选择"
          style="width: 100%"
        />
      </el-col>
        </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic.isOpen = false">取消</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
   <el-dialog v-model="logic2.isOpen" title="企业信息" width="500" align-center draggable>
    <el-form label-width="120" >
      <el-form-item label="公司名称" >
        <el-input  v-model="company.companyName" autocomplete="off" />
      </el-form-item>
       <div class="address-container">
      <el-form-item label="公司地址" >
       
          省
         <el-select v-model="company.provinceId" size="small" style="margin-right: 3px;"  class="address-select" @change="GetCity">
          <el-option v-for="item in Province" :label="item.provinceName" :value="item.provinceId" />
        </el-select>

       市
         <el-select v-model="company.cityId" size="small" style="margin-right: 3px;"    class="address-select" >
          <el-option v-for="item in cities" :label="item.cityName" :value="item.cityId"/>
        </el-select>
    
        <el-input v-model="company.companyAddress"  size="medium"  style="width: 200px;"inline  autocomplete="off"     class="address-input"/>
       
      
      </el-form-item>
      </div>
       <el-form-item label="成立时间" >
      <el-col :span="11">
        <el-date-picker
         value-format="YYYY-MM-DD"
          type="date"
        v-model="company.foundTime"
          placeholder="请选择"
          style="width: 100%"
        />
      </el-col>
      </el-form-item>
       <el-form-item label="公司简介" >
        <el-input v-model="company.companyProfile" autocomplete="off" type="textarea"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic2.isOpen = false">取消</el-button>
        <el-button type="primary" @click="saveNum">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
  <div>

<div>
  <h2 style="color:cyan; margin-top: 15px;">相关资质</h2>
<br/>
<hr>
 <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</div>


  <h2 style="color:cyan; margin-top: 15px;">企业信息 &nbsp; <el-button type="primary" @click="open2">设置</el-button></h2>
<br/>
<hr>
<el-form inline="true" class="demo-form-inline">
   <el-form :inline="true" style="margin-top: 15px;margin-left: 15px;" class="demo-form-inline">
      &nbsp;<el-form-item label="公司名称">
      :{{ slaughtercompany.companyName }}
    </el-form-item>
        &nbsp; &nbsp; &nbsp;<el-form-item label="成立时间">
      :{{ moment(slaughtercompany.foundTime).format("YYYY年-MM月-DD日:MM:SS")}}
    </el-form-item>
    <br/>
       <el-form-item label="公司地址">
      :{{ slaughtercompany.companyAddress }}
    </el-form-item>
     <el-form-item label="公司简介">
      :{{slaughtercompany.companyProfile}}
    </el-form-item>
        

    <br/>
    
  </el-form>
</el-form>
</div>
<div>
  <h2 style="color:cyan; margin-top: 15px;">企业照片</h2>
<br/>
<hr>
 <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</div>

</template>
<script lang="ts" setup>
import { reactive, ref, onMounted,watch, provide } from 'vue'
import axios from 'axios'
import { useRouter,useRoute } from 'vue-router'
const router=useRouter();
const route=useRoute();
import { useCounterStore } from '@/stores/counter';
const store=useCounterStore();
import { type FormInstance, type FormRules,ElMessage,ElMessageBox } from 'element-plus'
import moment from 'moment';
onMounted(()=>{
  GetBreeding();
  GetFarming();

})





//逻辑对象
const logic=reactive({
isOpen:false,

})
//逻辑对象
const logic2=reactive({
isOpen:false,

})

//屠宰企业信息
const company=reactive({
  companyName: "",
  provinceId: "",
  cityId: "",
  companyAddress: "",
  foundTime: "",
  companyProfile: "",
  productionBatch: route.query.productionBatch
})
//获取省的信息
const Province=ref<any>([])
const GetProvince=()=>{
axios.get("http://localhost:5219/api/Management/GetProvince").then(res=>{
      Province.value=res.data.data;
  })
}

//获取市的信息
const cities=ref<any>([])
const GetCity=()=>{
  axios.get("http://localhost:5219/api/Management/GetCity",{
    params:{
      provinceId:company.provinceId
    }
  }).then(res=>{
      cities.value=res.data.data;
  })
}
//打开屠宰企业信息的对话框
const open2=()=>{
  logic2.isOpen=true;
  company.companyName=""
  company.provinceId=""
  company.cityId=""
  company.companyAddress=""
  company.foundTime=""
  company.companyProfile=""
  GetProvince();

  cities.value.length=0;
}
//保存屠宰企业信息的方法
const saveNum=()=>{

axios.post("http://localhost:5219/api/Management/AddSlaugtherCompany",company).then(res=>{
  if(res.data.code==200)
{
ElMessage.success(res.data.message);

logic2.isOpen=false;
}
else
{
  ElMessage.error(res.data.message);
  return;
}
})
}
//显示屠宰企业信息
const slaughtercompany=ref<any>([])
const GetFarming=()=>{
  let productionBatch=route.query.productionBatch
  axios.get("http://localhost:5219/api/Management/GetCompany",{
    params:{
      productionBatch:productionBatch
    }
  }).then(res=>{
      slaughtercompany.value=res.data.data;
  })
}
//屠宰信息对象
const slaugth=reactive({
  productionBatch: "",
  arrivalWeight: "",
  arrivalTime: "",
  feedTime: ""



})
//打开屠宰信息对话框
const open=()=>{

  logic.isOpen=true;
  slaugth.productionBatch="";
  slaugth.arrivalWeight="";
  slaugth.arrivalTime="";
  slaugth.feedTime=""


}
//新增屠宰信息
const save=()=>{
  axios.post("http://localhost:5219/api/Management/AddSlaughter",slaugth).then(res=>{
    if(res.data.code==200)
  {
       ElMessage.success(res.data.message);
        logic.isOpen=false;
   
  }
  else
  {
     ElMessage.error(res.data.message);
        return;
  }
  })

}
//显示屠宰信息
const slaughtess=ref<any>([])
const GetBreeding=()=>{
  let productionBatch=route.query.productionBatch
  axios.get("http://localhost:5219/api/Management/GetSlaughter",{
    params:{
      productionBatch:productionBatch
    }
  }).then(res=>{
      slaughtess.value=res.data.data;
  })
}
//关于图片
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import type { UploadFile } from 'element-plus'
import { isPx } from 'element-plus/es/components/splitter/src/hooks/useSize.mjs';

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 10px;
}
</style>
<style scoped>
.address-container {
  display: flex;
  align-items: center;
}
.address-select {
  margin-right: 8px;
  width: 120px; /* 可按需调整选择器宽度 */
}
.address-input {
  width: 180px; /* 可按需调整输入框宽度 */
}
</style>
